import './pagniation.scss';
import Button from '../button';
import { ButtonShape, ButtonType } from '../button/type';
import React from 'react';

export interface PagniationProps {
	pages: number;
	currentPage: number;
	setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
	totalLength: number;
	buttonSelectType?: `${ButtonType}` | undefined;
	buttonType?: `${ButtonType}` | undefined;
	buttonShape?: `${ButtonShape}` | undefined;
	preButton?: React.ReactNode;
	nextButton?: React.ReactNode;
}

const Pagniation = (props: PagniationProps) => {
	const {
		pages,
		currentPage,
		setCurrentPage,
		totalLength,
		buttonSelectType = 'selected',
		buttonType = 'primary',
		buttonShape,
		preButton = <span>PRE</span>,
		nextButton = <span>NEXT</span>,
	} = props;

	const pagniationList = [...Array(pages).keys()];
	// const [currentPage, setPCurrentpage] = useState<number>(currentPage);
	const changePage = (item: number) => {
		setCurrentPage(item);
	};
	const goToPrePage = () => {
		const _cPage = currentPage - 1;
		if (_cPage > 0) {
			setCurrentPage(_cPage);
		}
	};
	const goToNextPage = () => {
		const _cPage = currentPage + 1;
		if (_cPage <= totalLength) {
			setCurrentPage(currentPage + 1);
		}
	};
	return (
		<div className="hs-ui-pagniation">
			<ul className="hs-ui-pagniation__list">
				<li
					className={`hs-ui-pagniation__item hs-ui-pagniation__pre-item`}
					onClick={goToPrePage}>
					<Button
						type={buttonType}
						shape={buttonShape}
						className="hs-ui-pagniation__button">
						{preButton}
					</Button>
				</li>
				{pagniationList.map((item: number) => {
					return (
						<li
							className={`hs-ui-pagniation__item ${
								currentPage === item + 1 ? 'hs-ui-pagniation__item-selected' : ''
							}`}
							key={item}
							onClick={() => changePage(item + 1)}>
							<Button
								type={currentPage === item + 1 ? buttonSelectType : buttonType}
								shape={buttonShape}
								className="hs-ui-pagniation__button">
								{item + 1}
							</Button>
						</li>
					);
				})}
				<li
					className={`hs-ui-pagniation__item hs-ui-pagniation__next-item`}
					onClick={goToNextPage}>
					<Button
						type={buttonType}
						shape={buttonShape}
						className="hs-ui-pagniation__button">
						{nextButton}
					</Button>
				</li>
			</ul>
		</div>
	);
};

export default Pagniation;
